<template>
  <!-- 宠物页下的数据 -->
  <!-- 内容text文本  -->
  <div class="page_chongwu_text">
    <!-- 3. 隐藏非Tab内容 -->
    <div class="page_chongwu_text_head">
      <div class="text_title">
        <h3>The Furry Fashionista Pet Pantry Store</h3>
      </div>
      <!-- 评分 -->
      <div class="text_score">
        <p class="text_score_star">⭐4.9</p>
        <p class="text_score_text">Pet Hospital</p>
      </div>
      <!-- 时间 -->
      <div class="text_time">
        <p>Open 09:00-20:30 Mon. to Sun.</p>
      </div>
      <!-- 地点 -->
      <div class="text_address">
        <p>it has been included for 3 years</p>
      </div>
      <!-- 电话 + 导航 -->
      <div class="text_phone">
        <div class="text_phone_l">
          <p>
            C-3685 Keele St North York ON M3J 3H6 Canada District, Toronto City
          </p>
          <span>Driving 1.2 km, 4 minutes</span>
        </div>
        <div class="text_phone_r">
          <!-- 地图按钮 -->
          <div class="text_phone_r_icon" @click.stop="openActionSheet('map')">
            <span class="iconfont icon-xiaofeiji"></span>
          </div>
          <!-- 电话按钮 -->
          <div class="text_phone_r_icon" @click.stop="openActionSheet('phone')">
            <span class="iconfont icon-dianhua"></span>
          </div>
        </div>
      </div>
    </div>
    <!-- 切换 -->
    <!-- 4. 强制显示评分Tab -->
    <PageChongwuTextSwitch />
  </div>
</template>

<script setup>
import PageChongwuTextSwitch from "./PageChongwuTextSwitch.vue";

const emit = defineEmits(["open-action-sheet"]); // 定义事件
const openActionSheet = (type) => {
  emit("open-action-sheet", type); // 通知父组件打开弹窗
};
</script>

<style  lang="scss">
.page_chongwu_text {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  margin-top: -10px;
  position: relative;
  background-color: #f7f7f7;
  font-weight: bold;
  .page_chongwu_text_head {
    .text_title {
      padding: 14px 14px 6px;
      font-size: 14px;
      box-sizing: border-box;
    }
    .text_score {
      width: 35%;
      display: flex;
      justify-content: space-between;
      padding-left: 14px;
      font-size: 12px;
      p {
        border: 1px solid;
        border-radius: 10px;
        padding: 0 5px;
        &.text_score_star {
          color: #fdb402;
          border-color: #fdb402;
        }
        &.text_score_text {
          color: #75c8b2;
          border-color: #75c8b2;
        }
      }
    }
    .text_time {
      font-size: 14px;
      padding: 6px 14px 0;
    }
    .text_address {
      font-size: 12px;
      width: 50%;
      padding: 2px;
      background-color: #feecc5;
      white-space: nowrap;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 6px 14px 0;
      border-radius: 5px;
      color: #e99632;
    }
    .text_phone {
      width: 88%;
      height: 60px;
      margin: 15px auto 0;
      background-color: #fff;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text_phone_l {
        width: 62%;

        p {
          overflow: hidden;
          font-size: 12px;
          text-overflow: ellipsis;
          color: #737576;
        }
        span {
          font-size: 12px;
          color: #ccc;
        }
      }
      .text_phone_r {
        flex: 1;
        display: flex;
        align-items: center;
        .text_phone_r_icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.1);
          margin-left: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            color: #19b78d;
            font-size: 24px;
          }
        }
      }
    }
  }
}
</style>